<template>
    <!-- 保留这个公共组件是因为要用on-scroll -->
    <div :style="{'height': `${height}`}" style="width: 100%;overflow-y: auto;overflow-x: hidden;" ref="scroll" class="vue-scroll">
        <div ref="scrollContent">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'VueScroll',
    components: {},
    data() {
        return {
            isTop: false,
            touchStart: 0,
            isLoading: false,
            translateY: 0
        };
    },
    props: {
        height: {
            type: String,
            default: '100%'
        },
        onTopLoading: {
            type: Boolean
        },
        allowPullDown: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        reset(top) {
            this.$refs.scroll.scrollTop = top;
        },
        touchMoveFunc(event) {
            if (!this.allowPullDown) {
                return false;
            }
            this.$refs.scrollContent.style = '';
            if (this.$refs.scroll.scrollTop === 0 && this.touchStart < event.touches[0].pageY) {
                this.$emit('on-scroll-top');
                this.translateY = event.touches[0].pageY - this.touchStart;
                let diff = 0;
                if (this.translateY > 130) {
                    this.isLoading = true;
                    diff = 64;
                }
                this.$refs.scrollContent.style.transform = `translateY(${(event.touches[0].pageY - this.touchStart) / 2 - diff}px)`;
            }
        }
    },
    mounted() {
        this.$refs.scroll.addEventListener('touchend', (event) => {
            if (!this.allowPullDown) {
                this.$refs.scrollContent.style = '';
                return false;
            }
            if (this.isLoading) {
                this.$refs.scrollContent.style.transition = 'all .2s linear';
                this.$refs.scrollContent.style.transform = `translateY(0rem)`;
                this.$emit('on-pulldown-loading');
            } else if (this.$refs.scrollContent.style.transform) {
                this.$refs.scrollContent.style.transform = `translateY(0rem)`;
            } else {
                this.$refs.scrollContent.style = '';
            }
        });
        this.$refs.scroll.addEventListener('touchstart', (event) => {
            this.touchStart = event.touches[0].pageY;
        });
        if (this.allowPullDown) {
            this.$refs.scroll.addEventListener('touchmove', (event) => this.touchMoveFunc(event));
        }
        this.$refs.scroll.addEventListener('scroll', () => {
            this.$emit('on-scroll', this.$refs.scroll.scrollTop);
            if (this.$refs.scroll.scrollTop + this.$refs.scroll.clientHeight + 1 >= this.$refs.scroll.scrollHeight) {
                this.$emit('on-scroll-bottom');
            } else if (this.$refs.scroll.scrollTop === 0) {
                this.isTop = true;
            }
        });
    },
    watch: {
        onTopLoading(val) {
            if (val) {
                this.isLoading = false;
            }
        },
        isLoading() {
            if (!this.isLoading) {
                this.$refs.scrollContent.style = '';
            }
        }
    }
};
</script>

<style scoped>
</style>
